
import React, { useState } from 'react';
import styles from '@/components/home/organization.module.scss'
import { Swiper, SwiperSlide } from 'swiper/react';
import Image from 'next/image';
import { Pagination, Controller, Autoplay, Navigation } from 'swiper/modules';

import { W1080Center } from '../ui/W1080Center';

import 'swiper/css';
import 'swiper/css/pagination';
interface Iprops {
    className: string
}
const data = {

    records: [
        {
            "id": 8,
            "name": "美国医学科学院肿瘤医院",
            "introduction": "十三五期间，中心共发起临床试验1488项，中国医学科学院肿瘤医院作为组长牵头数 获评中国生物医药产业链创新风云榜中国最佳临床研究机构。",
            "addr": "中国医学科学院肿瘤医院新住院综合楼北楼10层",
            "outpatientAddr": "中国医学科学院肿瘤医院内科门诊1层4诊室（工作日上午）",
            "carouselImgBase64": "",
            "carouselImgSrcUrl": "http://cms.ncctrials.cn/cms/img/fed9b08c6209444fbc42453c193a2a11.jpg"
        },
        {
            "id": 9,
            "name": "中国医学科学院肿瘤医院",
            "introduction": "十三五期间，中心共发起临床试验1488项，中国医学科学院肿瘤医院作为组长牵头数量为全国第一。在2020年中国获批上市的19种抗癌药物中，我院参与完成了其中16种药物临床试验。此外2020年，中国医学科学院肿瘤医院获批首批北京市研究型疾病示范建设单位，而GCP中心也获评中国生物医药产业链创新风云榜中国最佳临床研究机构。",
            "addr": "中国医学科学院肿瘤医院新住院综合楼北楼10层",
            "outpatientAddr": "中国医学科学院肿瘤医院内科门诊1层4诊室（工作日上午）",
            "carouselImgBase64": "",
            "carouselImgSrcUrl": "http://cms.ncctrials.cn/cms/img/fed9b08c6209444fbc42453c193a2a11.jpg"
        }
    ]
}

const Organization: React.FC<Iprops> = (props: Iprops) => {
    const { className } = props


    const classs = `${styles.Organization} ${className}`

    const pagination = {
        clickable: true,
        renderBullet: function (index: number, className: string) {
            return `<span class="${className} ${styles.swiperPaginationBullet}"> </span>`;
        },
    };
    return <W1080Center className={classs}>

        <Swiper
            spaceBetween={30}
            centeredSlides={false}
            autoplay={{
                delay: 2500,
                disableOnInteraction: false,
            }}
            pagination={pagination}
            navigation={true}
            modules={[Autoplay, Pagination, Navigation]}

        >
            {data.records.map(v => {
                return <SwiperSlide className={styles.swiperFlex} key={v.id}
                >
                    <div className={styles.left} >
                        <Image
                            width={512}
                            height={252}
                            src={v.carouselImgSrcUrl}
                            alt='' />

                    </div>
                    <div className={styles.right} >
                        <p className={styles.heaer_l}>
                            {v.name}</p>
                        <div className={styles.p1}>
                            {v.introduction}
                        </div>
                        <div className={styles.divt}>GCP中心地址</div>
                        <div className={styles.p2}>{v.addr}</div>
                        <div className={styles.divt}>临床试验门诊</div>
                        <div className={styles.p3}>{v.outpatientAddr}</div>
                    </div>
                </SwiperSlide>
            })}


        </Swiper>

    </W1080Center>
}

export default Organization;